<template>
  <el-dialog
    :title="title"
    width="700px"
    :visible="visiable"
    append-to-body
    @close="close"
  >
    <div>
      <el-form ref="formChangePayment" :model="form" label-width="100px">
        <el-form-item :label="iptLable">
          <el-input v-model="form[disableColumn]" disabled></el-input>
        </el-form-item>
        <el-form-item label="支付状态" required>
          <el-radio-group v-model="form[column]" @change="change">
            <el-radio v-for="item in options" :label="item.id" :key="item.id">{{
              item.name
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付方式" v-if="showPayStatus">
          <div class="radio-box-groups">
            <div class="radio-box" v-for="item in payOptions" :key="item.id">
              <el-radio
                :label="item.id"
                v-model="payType1"
                @input="changePayType1"
              >
                {{ item.typeName }}
              </el-radio>

              <div class="radio-children" v-if="item.children">
                （
                <div
                  class="radio-children-box"
                  v-for="ite in item.children"
                  :key="ite.id"
                >
                  <el-radio
                    :label="ite.id"
                    v-model="payType2"
                    @input="changePayType2(ite.id, item.id)"
                    >{{ ite.typeName }}</el-radio
                  >
                </div>
                ）
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer algin">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import RequestRemote from "../../utils/request";
export default {
  name: "duplicateCheckCoupon",
  props: {
    options: {
      type: Array,
      default: [],
    },
    visiable: {
      type: Boolean,
      default: false,
    },
    showPayStatus: {
      type: Boolean,
      default: true
    },
    Obj: {
      type: Object,
      default: {},
    },
    // 第二个字段 要更新的
    column: {
      type: String,
      default: "",
    },
    disableColumn: {
      type: String,
      default: "account",
    },
    requestURL: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    iptLable: {
      type: String,
      default: "",
    },
    payColumn: {
      type: String,
      default: "payType",
    },
    payList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      form: {
        id: 0,
      },
      payOptions: [],
      payType: null,
      payType1: null,
      payType2: null,
    };
  },
  mounted() {},

  watch: {
    receiveId: function (value) {
      this.form.id = value;
    },

    visiable: function (value) {
      if (value) {
        this.form.id = this.Obj.id;
        this.form[this.disableColumn] = this.Obj[this.disableColumn];
        this.form[this.column] = parseInt(this.Obj[this.column]);
        this.payOptions = [];
        this.payOptions = this.organizeArrayToTree(this.payList);
        this.payOptions.length &&
          this.payOptions.forEach((item) => {
            if (item.id === Number(this.Obj[this.payColumn])) {
              this.payType1 = item.id;
              this.payType = item.id;
            } else if (item.children) {
              let childrenObj = item.children.find(
                (item) => item.id === Number(this.Obj[this.payColumn])
              );
              if (childrenObj) {
                this.payType1 = item.id;
                this.payType2 = childrenObj.id;
                this.payType = childrenObj.id;
              }
            }
          });
      }
    },
  },

  methods: {
    changePayType1(e) {
      console.log(e);
      let obj = this.payList.find((item) => item.id === e);
      this.payType1 = e;
      if (!obj.children || !obj.children.length) {
        this.payType = e;
      } else {
        this.payType2 = obj.children.find((item) => item.id === this.payType2)
          ? this.payType2
          : obj.children[0].id;
        this.payType = this.payType2;
      }
    },

    changePayType2(e, p) {
      console.log(e, p);
      this.payType2 = e;
      if (this.payType === p) {
        this.payType = e;
      }
    },

    organizeArrayToTree(array) {
      if (!array.length) return [];
      const result = [];
      const oldArray = [...array];
      array.forEach((item) => {
        if (item.pId === 0 || !item.pId) {
          result.push(item);
        } else {
          let parent = oldArray.find((el) => el.id === item.pId);
          if (parent) {
            parent.children = parent.children || [];
            if (
              !parent.children.length ||
              !parent.children.find((el) => el.id === item.id)
            ) {
              parent.children.push(item);
            }
          }
        }
      });
      return result;
    },

    cancel() {
      this.close();
    },
    submitForm() {
      if (
        this.form[this.column] === "" ||
        (this.form[this.column] === null &&
          this.form[this.column] === undefined)
      ) {
        this.$message("请填写数据");
        return;
      }

      this.$confirm("是否变更支付状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          RequestRemote.put(this.requestURL, {
            ...this.form,
            [this.payColumn]: this.payType,
          }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.close();
            this.editOperationStatus();
          });
        })
        .catch((e) => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    change(e) {
      this.$forceUpdate();
    },

    editOperationStatus() {
      this.$emit("editOperationStatus", this.data);
    },

    close() {
      this.$emit("close", false);
    },
  },
};
</script>

<style>
.algin {
  text-align: center;
}

.radio-box-groups {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.radio-children,
.radio-box-children,
.radio-box {
  display: flex;
  align-items: center;
}
.radio-children-box {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
